<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生系统</title>

    <link rel="stylesheet" href="./学生系统.css">

</head>


<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        
        <div id="form">
            <p>姓名 <input id="username" type="text" value="李白" /> </p>
            <p>年龄 <input id="age" type="text" value="50" /> </p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>

        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody> </tbody>
        </table>
    </div>

    <script> 
        var addBtn = document.querySelector('#addBtn')
        var sortBtn = document.querySelector('#sortBtn')

        var username = document.querySelector('#username')
        var age = document.querySelector('#age')
        var gender = document.querySelector('#table')

        addBtn.addEventListener("click", function() {
            var tr = table.insertRow();
            tr.insertCell().innerHTML = username.value
            tr.insertCell().innerHTML = age.value
            tr.insertCell().innerHTML = gender.value
            tr.insertCell().innerHTML = '<button class="delete"> 删除 </button>';
        }, false);

        table.addEventListener("click", function(e) {
            if (e.target.className === 'delete') {
                table.deleteRow(e.target.parentElement.parentElement.rowIndex);
            }
        }, false)
    </script>

</body>
</html>